<template>
    <div>
        <van-nav-bar
            title="Inbox"
            left-arrow
            @click-left="$router.go('-1')"
        />
        <!-- container element in which TalkJS will display a chat UI -->
        <div id="talkjs-container" style="width:100%; height: 560px; margin-top: 15px;"><i>Loading chat...</i></div>
    </div>
</template>

<script>

    export default {
        name: 'chatList',
        metaInfo: {
            title: 'chatList',
            titleTemplate: '%s',
            // middleware: ['login'],
            meta: [
                {name: 'keywords', content: 'shop sell'},
                {name: 'description', content: 'Tolymoly'}
            ]
        },
        data() {
            return {
                conversationList: [],
            };
        },
        methods: {
            // 聊天列表到详情
            gotoChatDetail(targetId) {
                this.$router.push({
                    path: '/chat/chat',
                    query: {
                        targetId: targetId
                    }
                })
            }
        },
        mounted() {
            // 获取本地存储中的数据
            let userInfo = localStorage.getItem("userInfo") || '';

            if (userInfo) {
                userInfo = JSON.parse(userInfo) || '';
            }

            // 获取会话列表
            Talk.ready.then(() => {
                let me = new Talk.User({
                    id: userInfo.id,
                    name: userInfo.name,
                    photoUrl: userInfo.photo || 'https://www.tolymoly.com.mm/user-head.png'
                });

                window.talkSession = new Talk.Session({
                    appId: "tNP1PoEK",
                    me: me
                });

                let inbox = talkSession.createInbox();

                inbox.mount(document.getElementById("talkjs-container"));

                inbox.on("conversationSelected", (e) => {

                    console.log(inbox, '---当前的inbox对象', e, '--当前的事件源')

                    // this.$router.push({
                    //     path: '/chat/chat',
                    //     query: {
                    //         conversation: e,
                    //         fromType: 'chatList'
                    //     }
                    // })

                    return;
                })
            });
        }
    };
</script>

<style scoped>
    .chat-item {
        overflow: hidden;
    }

    #box {
        width: 100%;
        display: flex;
        min-height: 80px;
    }

    #left_box {
        width: 60px;
        height: 80px;
    }

    #right_box {
        width: 60px;
        height: 80px;
        text-align: center;
    }

    #center_box {
        flex: 1;
        height: 80px;
        padding: 0 8px;
    }

    .title {
        overflow: hidden;
        font-size: 14px;
        position: relative;
        left: 0;
        bottom: -2px;
    }

    .time {
        float: left;
    }

    .user-name {
        width: 60px;
        float: right;
        text-align: center;
    }

    .goods-img {
        width: 60px;
        height: 64px;
        overflow: hidden;
        position: relative;
        left: 0;
        top: 0;
    }

    .goods-img img {
        width: 100%;
        height: auto;
    }

    .img-tag {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 16px;
        background: #ff8e05;
        line-height: 16px;
        text-align: center;
    }

    .goods-title {
        font-size: 18px;
        /*margin-bottom: 5px;*/
    }

    .last-chat-mes {
        /*margin-bottom: 4px;*/
    }

    .user-pto {
        margin-top: 8px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        overflow: hidden;
    }

    .last-chat-mes {
        width: 100%;
        line-height: 1.2;
        max-height: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

</style>
